<template>
             <div :style="backgroundDiv">
          <div class="demo-input-suffix" >
                      <el-row style="padding-top:300px;margin-left:40%;margin-right:40%;">
                        <span style="font-size:30px;color:white">东软汽车制造业财务分析系统:</span>
                      </el-row>
          <el-row style="margin-top:0;margin-left:40%;margin-right:40%;">
  <el-col style="margin-top:79px" :span="4"><div class="grid-content bg-purple"><span >用户名:</span></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light">
  <el-input
  style="margin-top:69px"
  placeholder="请输入用户名"
  v-model="userName"
  clearable>
</el-input></div></el-col>
</el-row>
 <el-row style="margin-top:30px;margin-left:40%;margin-right:40%;">
  <el-col  style="margin-top:9px" :span="4"><div class="grid-content bg-purple">密码:</div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light">
    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>

    </div></el-col>
</el-row>
<el-row style="margin-top:20px;margin-left:42%;margin-right:40%;">
<el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">登录</el-button>
</el-row>
          </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      userName: '',
      password: '',
      isBtnLoading: false,
      backgroundDiv: {

        backgroundImage: 'url(' + require('../../assets/backImage2.jpg') + ')',

        backgroundRepeat: 'no-repeat',

        backgroundSize: '100% 100%',
        width: '100%',
        height: '900px'

      }
    }
  },
  created () {
    if (JSON.parse(localStorage.getItem('user')) && JSON.parse(localStorage.getItem('user')).userName) {
      this.userName = JSON.parse(localStorage.getItem('user')).userName
      this.password = JSON.parse(localStorage.getItem('user')).password
    }
  },
  computed: {
    btnText () {
      if (this.isBtnLoading) return '登录中...'
      return '登录'
    }
  },
  methods: {
    login () {
      if (!this.userName) {
        this.$message.error('请输入用户名')
        return
      }
      if (!this.password) {
        this.$message.error('请输入密码')
        return
      }
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/login',
        params: {
          username: this.userName,
          password: this.password
        }
      }).then((response) => { // 这里使用了ES6的语法
        // myChart.hideLoading();
        var Data2 = response.data
        console.log(Data2) // 请求成功返回的数据
        if (Data2.retcode === '0000') {
          console.log('查询成功！')
          this.isBtnLoading = true
          // sessionStorage.permission= res.permission;
          sessionStorage.eleToken = true
          sessionStorage.username = Data2.username
          //  sessionStorage.id = res.id;
          this.$router.push('/Navi')
        }
        if (Data2.retcode === '9999') {
          console.log('登录失败！')
          this.$message.error(Data2.retmsg)
        }
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
    }
  }
}
</script>
<style>
  .login_form {
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
  }
  .qxs-ic_user {
    background-size: 13px 15px;
    background: url("../../assets/login/ic_user.png") no-repeat 3%;
  }
  .qxs-ic_password {
    background-size: 13px 15px;
    background: url("../../assets/login/ic_password.png") no-repeat 3%;
    margin-bottom: 20px;
  }
  .login_logo {
    height: 100%;
  }
  .login_btn {
    width: 65%;
    font-size: 16px;
    background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
    filter: brightness(1.4);
  }
</style>
